<template>
  <div class="home bgImg">
    <div class="body">
      <!-- 这里是背景图部分 -->
      <div class="home-header">
        <!-- 这里是头像部分 -->
        <div class="header-touxiang">
          <transition name="img">
            <!-- <img v-if="this.$store.getters.getShow" :src="'data:image/jpeg;base64,'+this.$store.getters.getUser.avatar" alt="" class="tx"> -->
            <img v-if="this.$store.getters.getShow" :src="this.$store.getters.getUser.avatar" alt="" class="tx">
            <img class="tx" v-else src="/static/img/avatar/2.jpg" alt="">
          </transition>

          <i class="iconfont icon-triangle-up tx-shang"></i>
        </div>
        <!-- 这里是其他平台部分 -->
        <div class="header-pingtai">
          <!-- <h3 class="pt-nicheng" v-if="this.$store.getters.getShow">{{this.$store.getters.getUser.nickname}}</h3> -->
            <h3>蝉鸣如雨 花宵道中</h3>
            <ul class="pt-ul">
              <li v-for="ptItem in pingtai" :key="ptItem.id" class="pt-li">
                <a :href="ptItem.luyou"   target="_blank" >
                  <img :src="ptItem.img" alt="" class="pt-img">
                </a>
              </li>
              <li>
                <el-dropdown>
                  <img src="/static/img/tubiao/微信.svg" alt="" class="pt-img">
                  <!-- <el-dropdown-menu></el-dropdown-menu> -->
                  <el-dropdown-menu slot="dropdown">
                    <img src="/static/img/tubiao/weixin.png" class="pt-weixin" alt="">
                  </el-dropdown-menu>
                </el-dropdown>
              </li>

            </ul>
        </div>
        <div>
        </div>
      </div>
      <div class="home-body">
        <!-- 这里是兴趣部分 -->
        <div class="home-xingqu">
          <div class="xq-title">
            <i class="iconfont icon-aihao xq-aixin"></i>
            <h3>兴趣</h3>
          </div>
          <!-- 内容部分 -->
          <div class="xq-content">
            <div v-for="(xqItem,xqIndex) in xingqu" :key="xqIndex" class="ct-dv"  @mouseenter="mouse(xqIndex)" @mouseleave="mouse(xqIndex)" @click="to(xqItem.link)">
              <img :src="xqItem.img" alt="" class="ct-img">
              <el-collapse-transition>
                <div v-show="xqItem.flag" class="ceshi">
                  <h3 class="ct-name">{{xqItem.title}}</h3>
                  <p class="ct-content">{{xqItem.content}}</p>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>
        <!-- 这里是发现部分 -->
        <div class="home-find">
          <div class="fd-title">
            <i class="iconfont icon-faxian fd-find"></i>
            <h3>发现</h3>
          </div>
          <div class="fd-content">
            <div v-for="fdItem in find.slice(0,len)" :key="fdItem.data_id" class="fd-dv">
              <!-- 图片-左 -->
              <div class="fd-left">
                <img :src="fdItem.img" alt="" @click="go(fdItem)">
              </div>
              <!-- 内容-右 -->
              <div class="fd-right">
                <!-- 时间部分 -->
                <div class="rt-time">
                  <i class="iconfont icon-shijian icon-time"></i>
                  <span>{{fdItem.data_time}}</span>
                </div>
                  <!-- 标题部分 -->
                  <div class="rt-title">
                    <h3>{{fdItem.title}}</h3>
                  </div>

                  <!-- 标签部分 -->
                  <div class="rt-label">
                    <!-- <i class="iconfont icon-ziyuan"></i> -->
                    <!-- <span>置顶</span> -->
                    <!-- <i class="iconfont icon-dian"></i> -->
                    <i class="iconfont icon-biaoqian"></i>
                    <span @click="toSort(fdItem.sortName)">{{fdItem.sortName}}</span>
                    <i class="iconfont icon-dian"></i>
                    <i class="iconfont icon-danganziliao"></i>
                    <span @click="toContent(fdItem.ctName)">{{fdItem.ctName}}</span>
                  </div>
                  <!-- 描述部分 -->
                  <div class="rt-describe">
                    <p>{{fdItem.describes}}</p>
                  </div>
                  <div>
                    <i class="iconfont icon-caidan rt-caidan"  @click="go(fdItem)"></i>
                  </div>
              </div>
            </div>
          </div>
          <!-- 点击获取更多数据 -->
          <div class="fd-previous">
            <el-button round  v-if="len<find.length" @click="more">Previous</el-button>
            <span v-else><i class="iconfont icon-meiyoushuju"></i> 没有更多了</span>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inject:['reload'],//注入App里的reload方法
  data(){
    return {
      nicheng:"这里是昵称",
      pingtai:[
        {
          "img":"/static/img/tubiao/gitee-fill-round.png",
          "luyou":"/home"
        },
        {
          "img":"/static/img/tubiao/github.svg",
          "luyou":"https://github.com/mengyuxiangfandemeng"
        },
        {
          "img":"/static/img/tubiao/csdn.svg",
          "luyou":"https://blog.csdn.net/qq_45621096"
        },
        {
          "img":"/static/img/tubiao/知乎.svg",
          "luyou":"https://www.zhihu.com/people/meng-yu-xiang-fan-de-meng"
        },
        {
          "img":"/static/img/tubiao/简书.png",
          "luyou":"https://www.jianshu.com/u/4a3e51c1858b"
        },
        {
          "img":"/static/img/tubiao/网易云.jpg",
          "luyou":"https://music.163.com/#/user/home?id=1600068881"
        },
        {
          "img":"/static/img/tubiao/bilibili-fill.svg",
          "luyou":"https://space.bilibili.com/477000170/dynamic"
        },
      ],
      xingqu:[
        {
          "title":"VUE",
          "content":"本站vue开发",
          "img":"/static/img/xingqu/vue.jpg",
          "link":"/exploitation",
          "flag":false
        },
        {
          "title":"网易蜗牛读书",
          "content":"时间出新知",
          "img":"/static/img/xingqu/读书.jpg",
          "link":"/snailReading",
          "flag":false
        },
        {
          "title":"Element",
          "content":"组件",
          "img":"/static/img/xingqu/csdn.jpg",
          "link":"/element",
          "flag":false
        },
      ],
      find:[
        {
          "title":"GraphQL 实现递归查询",
          "watchNum":222,
          "commentNum":22,
          "date":"2020-2-16",
          "time":"17:02",
          "contentSort":"野生技术协会",
          "knowledgeSort":"GraphQL",
          "describe":"这是一段描述",
          "img":"/boke/src/assets/img/tubiao/ajax.png"
        },
      ],
      len:4


    }
  },
  mounted(){
    this.findData();
    // console.log(this.$store.getters.getShow);
    // console.log(this.$store.getters.getUser.avatar);
    // console.log(this.$store.getters.getUser.userType);
  },
  methods:{
    async findData(){
      const {data:res} = await this.$http.get('findData');
      // console.log("这里是发现");
      console.log(res);
      if(res.status!=200){
        this.$message.error('获取数据失败');
      }else{
        this.find = res.message;
        // console.log(this.find);
      }
    },
    toSort(name){
      // console.log(name);
      this.$router.push({path:'/labelList',query:{stName:name}})
    },
    toContent(name){
      // console.log(name);
      this.$router.push({path:'/labelList',query:{ctName:name}})
    },
    mouse(index){
      this.xingqu[index].flag = !this.xingqu[index].flag;
    },
    async go(item){
      console.log(item);
      let id = item.data_id;
      let readAmount = item.readAmount;
      const {data:res} = await this.$http.post("adddDetailCount",{id,readAmount})
      console.log(res);
      if(res.status != 200){
        this.$message.error('操作失败');
      }else{
        this.$router.push({path:'/details',query:{id:id}})
      }
    },
    more(){
      // console.log("这里是获取更多按钮");
      this.len += 4;
      // console.log(this.find);
    },
    to(path){
      // console.log(path);
      this.$router.push(path);
    }
  }
}
</script>
<style scoped>
.home {
  /* background-color: red; */
  /* padding-top: 60px; */
  /* background: url('/static/img/bg/1.gif') no-repeat;
  width: 100%;
  background-size:100% 100%;
  background-attachment:fixed;
  display: flex;
  flex-direction: column;
  align-items: center; */
}
/* 头部部分 */
/* .home-header {
  padding: 200px 0;
} */
.header-touxiang {
  /* width: 100%; */
   display: flex;
  flex-direction: column;
  align-items: center;
}
.header-touxiang>.tx {
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border-radius: 50%;
  border: 5px solid rgba(21, 19, 19, 0.48);
  /* max-width: 100%;
  max-height: 100%; */
}



/* 鼠标悬停，旋转停止 */
  @keyframes animation2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.header-touxiang>.tx:hover {
  cursor: pointer;
  animation: animation2 1s ease;
  animation-fill-mode : forwards;/*保持结束位置*/

}
.header-touxiang>.tx-shang {
  /* background-color:rgb(255,0,255,0.3);  */
  color: rgba(21, 19, 19, 0.48);
  font-size: 25px;
  height: 22px;
}
.header-pingtai {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-color:rgb(255,0,0,0.3); */ /*红色*/
  background-color:rgba(21, 19, 19, 0.48);
  width: 600px;
  margin: auto;
  border-radius: 15px;
}
.pt-ul {
  list-style-type: none;
  /* background: yellow; */
  display: flex;
  width: 450px;
  justify-content: space-around;
  align-items: center;
}
.pt-img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}
.pt-weixin {
  width: 100px;
  height: 100px;
}
.home-body {
  width: 100%;
   margin: 50px auto;
  /* border-top: 3px solid red; */
}
/* 兴趣部分 */
.home-xingqu,.home-find{
  display: flex;
  flex-direction: column;
  width: 900px;
  margin: auto;
}
.xq-title,.fd-title {
  /* background-color: yellow; */
  /* border-bottom: 1px dotted rgba(21, 19, 19, 0.48); */
  border-bottom: 1px dotted rgba(255, 0, 255, 0.32);
  height: 50px;
  display: flex;
  align-items: center;
}
.xq-aixin,.fd-find {
  font-size: 25px;
  color: black;
}
.xq-content {
  /* background-color: blue; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
}
.ct-dv {
  width: 287px;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.ct-dv>.ct-img {
  width: 100%;
  transition: all 1s;
}
.ct-dv>.ct-img:hover {
  transform: scale(1.2);
  opacity: 0.6;
}

.ceshi {
  width: 100%;
  height: 110px;
  position: absolute;
  top: 10px;
}
.ct-name {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #000;
  color: #fff;
  text-align: center;
  z-index: 1;
}
.ct-content {
  color: #fff;
  font-size: 12px;
  text-align: center;
}
/* 发现部分 */
.fd-dv {
  height: 300px;
  margin: 50px 0;
  border-radius: 20px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */
  box-shadow: 0px 2px 12px #8888;
  background: #fff;
}
.fd-dv:hover {
  box-shadow: 0px 2px 20px #8888;
  cursor: pointer;
}
 /* 左侧-图片 */
.fd-left {
  width: 50%;
  /* height:150px; */
  overflow: hidden;
}
.fd-left>img {
  width: 100%;
  height: 100%;
  transition: all 1s;
  border-radius: 20px 0px 0px 20px;
}
.fd-left>img:hover {
  transform: scale(1.2);
  /* border-radius: 20px 0px 0px 20px; */
}
 /* 右侧-内容 */
.fd-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 50px;
}
.fd-right>div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rt-time,.rt-label {
  /* background-color: red; */
  font-size: 15px;
}
.icon-time {
  font-size:18px;
}

.rt-label>i {
  font-size: 18px;
}
.rt-caidan {
  font-size: 30px;
}
.rt-caidan:hover {
  color: orange;
}
.fd-previous {
  margin: auto;
}

</style>
